<template>
  <view class="sticky-top" :style="getStyle">
    <slot></slot>
  </view>
</template>

<script lang="ts">
export default {
  name: 'sticky-top', // 吸顶
  props: {
    zIndex: {
      type: [Number, String],
      default: 99
    },
    top: {
      type: String,
      default: ''
    }
  },
  computed: {
    getStyle() {
      let style = 'z-index: ' + this.zIndex + ';'
      if (this.top) {
        style += 'top:' + this.top + ';'
      }
      return style
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss">
.sticky-top {
  position: sticky;
  top: var(--window-top);
  display: flex;
}
</style>
